﻿<script setup lang="ts" name="WebsiteAddEdit">
import DrawerWrap from '../DrawerWrap/index.vue'
import { colorArray } from '@/views/Plugins/Designer/Website/utils'
import useDictionaryEntry from '@/hooks/useDictionaryEntry'
const { getDictionaryEntryData } = useDictionaryEntry()
const props = defineProps({
  deviceList: { type: Array as any },
  industryList: { type: Array as any }
})
const formResult = ref({
  industry: [],
  lang: '',
  device: '',
  app: [],
  name: '',
  width: 1500,
  primaryColor: '#1890ff',
  remark: ''
})

const appList = ref([])
const getAppList = async () => {
  console.log('获取状态数据')
  appList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'app'
  })
}
getAppList()

const getDeviceData = (data) => {
  let result = ''
  props.deviceList.forEach((item) => {
    if (item.label === data) {
      result = item.value
    }
  })
  return result
}
const getIndustryValue = (data) => {
  let result = []
  props.industryList.forEach((item) => {
    if (item.label === data) {
      result = [item.value]
    }
  })
  return result
}

const drawerWrap = ref(null)
// 显示新建/编辑站点表单抽屉弹窗
const showDrawerWrap = (v) => {
  getLanguageList()
  drawerWrap.value.showDrawer(v)
  if (v.type === 'edit') {
    formResult.value.industry = getIndustryValue(v.options.industry)
    formResult.value.device = getDeviceData(v.options.device)
    formResult.value.name = v.options.title
    formResult.value.width = parseInt(v.options.width)
    formResult.value.primaryColor = v.options.color
    formResult.value.remark = v.options.description
  } else {
    formResult.value.industry = []
    formResult.value.device = ''
    formResult.value.name = ''
    formResult.value.width = 1500
    formResult.value.primaryColor = '#1890ff'
    formResult.value.remark = ''
  }
}
// 子组件将方法暴露给父组件
defineExpose({ showDrawerWrap })

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
// 预览图删除事件
const handleRemove = (file) => {
  console.log(file)
}
// 预览图预览事件
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const languageList = ref([])
const getLanguageList = async () => {
  console.log('获取状态数据')
  languageList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'language'
  })
}
</script>

<template>
  <DrawerWrap ref="drawerWrap">
    <el-form class="website-page-module-form" label-width="auto" label-position="right">
      <el-form-item label="站点昵称">
        <el-input v-model="formResult.name" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="语言">
        <el-select v-model="formResult.lang" placeholder="选择语言">
          <el-option v-for="item in languageList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属行业" class="industry">
        <el-checkbox-group v-model="formResult.industry">
          <el-checkbox-button v-for="(item, index) in industryList" :key="index" :label="item.value">{{ item.label }}</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="平台">
        <el-radio-group class="radio-button" v-model="formResult.device">
          <el-radio-button v-for="(item, index) in deviceList" :key="index" :label="item.value">{{ item.label }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="小程序" class="industry" v-if="formResult.device === 'app'">
        <el-checkbox-group v-model="formResult.app">
          <el-checkbox-button v-for="(item, index) in appList" :key="index" :label="item.value">{{ item.label }}</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="版心宽度" v-if="formResult.device === 'pc'">
        <el-input-number v-model="formResult.width" :step="10" placeholder="" />
      </el-form-item>
      <el-form-item label="主题色">
        <el-color-picker v-model="formResult.primaryColor" show-alpha :predefine="colorArray()" />
      </el-form-item>
      <el-form-item label="预览图" class="preview-img">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <el-icon>
            <Plus />
          </el-icon>
          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="站点备注">
        <el-input v-model="formResult.remark" type="textarea" placeholder="请输入站点特点描述" />
      </el-form-item>
    </el-form>
    <el-dialog class="image-preview-dialog" v-model="dialogVisible">
      <img :src="dialogImageUrl" alt="预览图" />
    </el-dialog>
  </DrawerWrap>
</template>

<style scoped lang="scss"></style>
